<!--
以此组件进行v-model的封装基础
-->
<template>
  <el-input ref="elInput" v-model="inputValue" v-bind="$attrs" v-on="$listeners" @blur="blurMe" @focus="focusMe"></el-input>
</template>

<script>
export default {
  name: 'mc-input',
  data () {
    return {
      tmpValue:"",
      triggerValid:false,
      rules: {
        "v":/^[a-z][a-zA-Z0-9]*$/,
        // 检测是否有输入，可以输入任何字符，不留空即可通过验证；
        "*": /^[\w\W]+$/,
        // 检测是否为6到16位任意字符；
        "*6-16": /^[\w\W]{6,16}$/,
        // 数字类型；
        "n": /^\d+$/,
        // 6到16位数字；
        "n6-16": /^\d{6,16}$/,
        // 字符串类型；
        "s": /^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,
        // 6到18位字符串；
        "s6-18": /^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,
        // 验证是否为邮政编码；
        "p": /^[0-9]{6}$/,
        // 手机号码格式；
        "m": /^1[3-9][0-9]{9}$/,
        // email格式；
        "e": /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
        // 验证字符串是否为网址。
        "url": /^(\w+:\/\/)?\w+(\.\w+)+.*$/,
        // 日期格式
        "date": /^(?:(?:1[6-9]|[2-9][0-9])[0-9]{2}([-/.]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:(?:1[6-9]|[2-9][0-9])(?:0[48]|[2468][048]|[13579][26])|(?:16|[2468][048]|[3579][26])00)([-/.]?)0?2\2(?:29))(\s+([01][0-9]:|2[0-3]:)?[0-5][0-9]:[0-5][0-9])?$/,
        //匹配中文字符;
        "zh": /^[\u4e00-\u9fa5]+$/,
        //匹配双字节字符;
        "dword": /^[^\x00-\xff]+$/,
        // 货币类型
        "money": /^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/,
        //匹配ipv4地址;
        "ipv4": /^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$/,
        // 匹配ipv6地址;
        "ipv6": /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/,
        //数值型;
        "num": /^(\-|\+)?\d+(\.\d+)?$/,
        //QQ号码;
        "qq": /^[1-9][0-9]{4,}$/,
        // 身份证
        "idcard": /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
        // 时间格式  例如：10:57:10
        "time": /^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/,
        // 固话
        "t": /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/,
        // 手机或者固话
        "tm": /((15)\d{9})|((13)\d{9})|((18)\d{9})|(0[1-9]{2,3}\-?[1-9]{6,7})/i,
        // 判断是否是视频文件
        "video": /(.*)\.(rm|rmvb|wmv|avi|mp4|3gp|mkv)$/,
        // 判断是否是flash文件
        "flash": /(.*)\.(swf|fla|flv)$/,
        // 判断是否是mp3文件
        "mp3": /(.*)\.(mp3)$/,
        // 判断是否是文档文件
        "doc": /(.*)\.(doc|xls|docx|xlsx|pdf)$/,
        // 判断是否是图片文件
        "img": /(.*)\.(jpg|gif|ico|jpeg|png)$/,
        // 判断是否是压缩包文件
        "zip": /(.*)\.(rar|zip|7zip|tgz)$/,
        // 判断是否一个md5字符串
        "md5": /^([a-fA-F0-9]{32})$/,
        // 判断是否是ascii码
        "ascii": /^[\x00-\xFF]+$/,
        // 判断是否是十六进制颜色值
        "color": /^#[0-9a-fA-F]{6}$/,
        // 判断是否全部是小写字母
        "ens": /^[a-z]+$/,
        // 判断是否是全部大写字母
        "enb": /^[A-Z]+$/,
        // 判断是否是正常的年龄
        "age": /^[1-99]?\d*$/,
        // 判断是否是中文名称
        "cname": /^[\u0391-\uFFE5]{2,15}$/,
        // 判断是否是英文名称
        "ename": /^[A-Za-z]{1,161}$/,
        // 判断是否是正数
        "pn": /^[+]?\d+(\.\d+)?$/,
        // 判断是否是负数
        "upn": /^-\d+(\.\d+)?$/
      },
      tip: {
        "v":"请输入字母数字,驼峰形式",
        "*": "不能为空！",
        "*6-16": "请填写$1到$2位任意字符！",
        "n": "请填写数字！",
        "n6-16": "请填写$1到$2位数字！",
        "s": "不能输入特殊字符！",
        "s6-16": "请填写$1到$2位字符！",
        "p": "请填写邮政编码！",
        "m": "请填写手机号码！",
        "e": "邮箱地址格式不对！",
        "url": "请填写网址！",
        "date": "请填写日期！",
        "zh": "请填写中文！",
        "dword": "请填写双字节字符！",
        "money": "请填写货币值！",
        "ipv4": "请填写ip地址！",
        "ipv6": "请填写IPv6地址！",
        "num": "请填写数值！",
        "qq": "请填写QQ号码！",
        "idcard": "请填写身份证号码",
        "time": "请输入时间格式",
        "t": "请输入固话",
        "tm": "请输入手机或固话",
        "video": "请输入视频文件",
        "flash": "请输入flash文件",
        "mp3": "请输入mp3文件",
        "doc": "请输入文档文件",
        "img": "请输入图片格式文件",
        "zip": "请输入压缩包格式文件",
        "md5": "请输入md5码字符串",
        "ascii": "请输入ascii码字符串",
        "color": "请输入十六进制颜色字符串",
        "ens": "请输入纯小写字母",
        "enb": "请输入纯大写字母",
        "age": "请输入正确的年龄",
        "cname": "请输入正确的中文名称",
        "ename": "请输入正确的英文名称",
        "pn": "请输入正确的正数",
        "upn": "请输入正确的负数"
      }
    }
  },
  props:[
    'value',
    //验证规则 ['email']
    'mcRule',
    //用户自定义rule:[{r:'',t:''}]
    'userRule',
  ],
  watch:{

  },
  computed:{
    inputValue:{
      get:function (){
        return this.value;
      },
      set:function (v){
        this.$emit("input",v);
        this.input(v);
      }
    }
  },
  mounted () {

  },
  methods:{
    focus(){
      this.$nextTick(()=>{
        this.$refs.elInput.focus();
      })
    },
    blur(){
      this.$nextTick(()=>{
        this.$refs.elInput.blur();
      })
    },
    change(){
      this.$nextTick(()=>{
        this.$refs.elInput.change();
      })
    },
    clear(){
      this.$nextTick(()=>{
        this.$refs.elInput.clear();
      })
    },
    input(val){//改造后 input就冲突的厉害 重复了 只能另搞事件
      this.$emit("mc-input",val);
    },
    focusMe(e){
      if(this.triggerValid && this.tmpValue+""){
        this.inputValue = this.tmpValue;
      }
//      this.$emit("focus",e); 不能加 不然重复了
    },
    blurMe(e){
      this.triggerValid=false;
      this.tmpValue = this.inputValue;
      var mcRule = this.mcRule;
      if(mcRule){
        for(var i=0;i<mcRule.length;i++){
          var key = mcRule[i];
          var regExp = this.rules[key];
          var tip = this.tip[key];
          if(regExp){
            if(!(regExp.test(this.inputValue+""))){
              this.$message({type:"warning",message:"输入格式不正确："+tip});
              this.inputValue = "";//清空用户的输入值
              this.triggerValid=true;
              break;
            }
          }
        }
      }
      if(this.userRule){
        for(var i=0;i<this.userRule.length;i++){
          var item = this.userRule[i];
          var regExp = item.r;
          var tip = item.t;
          if(!(new RegExp(regExp).test(this.inputValue+""))){
            this.$message({type:"warning",message:"输入格式不正确："+tip});
            this.inputValue = "";//清空用户的输入值
            this.triggerValid=true;
            break;
          }
        }
      }
//      this.$emit("blur",e); 不能加 不然重复了
    }
  }
}
</script>

<style lang="scss">

</style>
